<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 消息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`未读消息(${messCount.not_count})`" name="first">
                    <el-table :data="unread" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <div class="message-body">
                                        <span class="message-title" v-html="scope.row.title"></span>
                                    </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="created_at" width="180"></el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="handle-row" v-if="messCount.not_count>0">
                        <el-button type="primary" @click="allRead" >全部标为已读</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="`已读消息(${messCount.read_count})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="read" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <div class="message-body">
                                        <span class="message-title" v-html="scope.row.title"></span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="created_at" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row" v-if="messCount.read_count>0">
                            <el-button type="danger" @click="delAll">删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'message',
        data() {
            return {
                message: 'first',
                messCount:{not_count:0,read_count:0},
                showHeader: false,
                unread: [],
                read: [],
                del(id,ck){
                    if(this.read.length<1){
                        return false;
                    }
                    if(typeof id=='undefined'){
                        id='all';
                    }
                    let that=this;
                    that.api.delMessage(id,function(){
                            ck(that);
                    });
                }
            }
        },

        created(){
            let that=this;
            that.api.getMessageCount(function(data){
                that.messCount=data;
            });
            that.api.getUserMessage(function(data){
                that.unread=data.not;
                that.read=data.read;
            });
        },

        methods: {
            handleRead(index) {
                let that=this;
                that.api.readUserMessage(this.unread[index].id,function(){
                    const item = that.unread.splice(index, 1);
                    that.read = item.concat(that.read);
                    that.api.getMessageCount(function(data){
                        that.messCount=data;
                    });
                });
                
            },
            handleDel(index) {
                this.del(this.read[index].id,function(that){
                    that.read.splice(index, 1);
                    that.api.getMessageCount(function(data){
                        that.messCount=data;
                    });
                });
                
            },
            delAll(){
                this.del('all',function(that){
                    that.messCount.read_count=0;
                    that.read=[];
                });
            },
            allRead(){
                let that=this;
                if(this.unread.length<1){
                    return false;
                }
                this.api.readAllUserMessage(function(){
                    that.unread=[];
                    that.api.getMessageCount(function(data){
                        that.messCount=data;
                    });
                    that.api.getUserMessage(function(data){
                        that.unread=data.not;
                        that.read=data.read;
                    });
                });
            }
        }
    }

</script>

<style>
.message-title{
    cursor: pointer;
    color:#666;
}
.handle-row{
    margin-top: 30px;
}
</style>

